<!--作者:于大明-->
<template>
   <view class="chatInterface">
   	<view class="scroll-view">
   		<view class="all-history-loaded">
   			{{allHistoryLoaded ? '已经没有更多的历史消息' : '下拉获取历史消息'}}
   		</view>
   		<checkbox-group @change="selectMessages">
   			<!--消息记录-->
   			<view v-for="(message,index) in messages" :key="message.messageId">
   				<!--时间显示，类似于微信，隔5分钟不发言，才显示时间-->
   				<view class="time-lag">
   					{{renderMessageDate(message, index)}}
   				</view>
   				<view class="message-recalled" v-if="message.recalled">
   					<view v-if="message.senderId !== currentUser.uuid">{{friend.name}}撤回了一条消息</view>
   					<view v-else class="message-recalled-self">
   						<view>你撤回了一条消息</view>
   						<span v-if="message.type === 'text' && Date.now()-message.timestamp< 60 * 1000 " @click="editRecalledMessage(message.payload.text)">重新编辑</span>
   					</view>
   				</view>
   				<view class="message-item" v-else>
   					<view class="message-item-checkbox">
   						<checkbox v-show="messageSelector.visible && message.status !== 'sending'" :value="message.messageId" :checked="messageSelector.messages.includes(message)" />
   					</view>
   					<view class="message-item-content" :class="{'self' : message.senderId ===  currentUser.uuid}">
   						<view class="avatar">
   							<image :src="message.senderId === currentUser.uuid? currentUser.avatar : friend.avatar"></image>
   						</view>
   						<view class="content" @longpress="showActionPopup(message)">
   							<view class="message-payload">
   								<b class="pending" v-if="message.status === 'sending'"></b>
   								<b class="send-fail" v-if="message.status === 'fail'"></b>
   								<view v-if="message.type === 'text'" v-html="renderTextMessage(message)"></view>
   								<image class="image-content" v-if="message.type === 'image'" :src="message.payload.url" :data-url="message.payload.url" @click="showImageFullScreen" mode="widthFix"></image>
   								<view class="video-snapshot"  v-if="message.type === 'video'" :data-url="message.payload.video.url" @click="playVideo">
   									<image :src="message.payload.thumbnail.url" mode="aspectFit" style="width: 400rpx;"></image>
   									<view class="video-play-icon"></view>
   								</view>
   								<go-easy-audio-player v-if="message.type ==='audio'" :src="message.payload.url" :duration="message.payload.duration" />
   								<view class="custom-message" v-if="message.type === 'order'">
   									<view class="title">
   										<image src="../../../static/images/order.png"></image>
   										<text>自定义消息</text>
   									</view>
   									<view class="custom-message-item">编号：{{message.payload.number}}</view>
   									<view class="custom-message-item">商品: {{message.payload.goods}}</view>
   									<view class="custom-message-item">金额: {{message.payload.price}}</view>
   								</view>
   							</view>
   							<view v-if="message.senderId === currentUser.uuid" :class="message.read ?'message-read':'message-unread'">
   								<view v-if="message.status === 'success'">{{message.read?'已读':'未读'}}</view>
   							</view>
   						</view>
   					</view>
   				</view>
   			</view>
   		</checkbox-group>
   	</view>
   	<view class="action-box" v-if="!videoPlayer.visible && !messageSelector.visible">
   		<view class="action-top">
   			<view :class="[audio.visible ? 'record-icon record-open':'record-icon']" @click="switchAudioKeyboard"></view>
   			<view class="record-input" @touchstart="onRecordStart" @touchend="onRecordEnd" v-if="audio.visible" >{{audio.recording ? '松开发送' : '按住录音'}}</view>
   			<view class="message-input" v-else>
   				<!-- GoEasyIM最大支持3k的文本消息，如需发送长文本，需调整输入框maxlength值 -->
   				<input type="text" maxlength="700" placeholder="发送消息" v-model="content" @focus="messageInputFocusin">
   			</view>
   			<view class="file-icon emoji-icon" @click="showEmoji"></view>
   			<view class="file-icon more-icon" @click="showOtherTypesMessagePanel"></view>
   			<span class="send-message-btn" @click="createTextMessage">发送</span>
   		</view>
   		<!--展示表情列表-->
   		<view class="action-bottom action-bottom-emoji" v-if="emoji.visible">
   			<image class="emoji-item" v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index" :src="emoji.url + emojiItem" @click="chooseEmoji(emojiKey)"></image>
   		</view>
   		<!--其他类型消息面板-->
   		<view class="action-bottom" v-if="otherTypesMessagePanelVisible">
   			<view class="more-item" @click="createImageMessage">
   				<image src="../../../static/images/tupian.png"></image>
   				<text>图片</text>
   			</view>
   			<view class="more-item" @click="createVideoMessage">
   				<image src="../../../static/images/shipin.png"></image>
   				<text>视频</text>
   			</view>
   			<view class="more-item" @click="showCustomMessageForm">
   				<image src="../../../static/images/zidingyi.png"></image>
   				<text>自定义消息</text>
   			</view>
   		</view>
   	</view>
   	<view class="action-popup" @touchmove.stop.prevent v-if="actionPopup.visible">
   		<view class="layer"></view>
   		<view class="action-box">
   			<view class="action-item" @click="deleteSingleMessage">删除</view>
   			<view class="action-item" v-if="actionPopup.recallable" @click="recallMessage">撤回</view>
   			<view class="action-item" @click="showCheckBox">多选</view>
   			<view class="action-item" @click="actionPopup.visible = false">取消</view>
   		</view>
   	</view>
   	<view class="messageSelector-box" v-if="messageSelector.visible">
   		<image class="messageSelector-btn" @click="deleteMultipleMessages" src="/static/images/delete.png"></image>
   	</view>
   	<view class="record-loading" v-if="audio.recording"></view>
   	<video v-if="videoPlayer.visible" :src="videoPlayer.url" id="videoPlayer" @fullscreenchange="onVideoFullScreenChange"></video>
   	<custom-message v-if="customMessageFormVisible" @createCustomMessage="createCustomMessage" @closeCustomMessageForm="closeCustomMessageForm"></custom-message>
   </view>
   
</template>

<script src="./privateChat.js"></script>

<style lang="less" scoped>
    @import url('privateChat.less');
</style>
